<template>
  <div class="container">
    <el-table :data="tableData" class="table-container " show-summary :summary-method="getSummaries">
      <el-table-column prop="receiveAccountId" label="收款账号">
        <template slot-scope="scope">
         <el-select clearable v-model="scope.row.receiveAccountId">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column prop="actualMoney" label="收款金额">
        <template slot-scope="scope">
          <el-input v-model="scope.row.actualMoney" v-thousands.actualMoney="scope.row" ></el-input>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="del(scope.row.receiveAccountId)">删除</el-button>
          <!-- <el-input
            v-model="scope.row.money"
            oninput="value=value.replace(/[^\d^\.,]/g,'')"
          ></el-input> -->
        </template>
      </el-table-column>
    </el-table>
    <section class="addButton" @click="add">增加明细</section>
  </div>
</template>
<script>
  import {
    getSelectData
  } from '@/api/business/business.js'

  export default {
    data() {
      return {
        tableData: [{
          actualMoney: "",
          receiveAccountId: "",
        }],
        options: [], //下拉框需要
      };
    },
    methods: {
      getSelectData() {
        getSelectData().then(res => {
          this.options = res.data.result;
          console.log(res.data)
        })
      },
      del(receiveAccountId) {
        for (let index = 0; index < this.tableData.length; index++) {
          const element = this.tableData[index];
          if (this.tableData[index].receiveAccountId === receiveAccountId) {
            this.tableData.splice(index, 1);
            break;
          }
        }
      },
      //自定义合计逻辑
      getSummaries(param) {
        const {
          columns,
          data
        } = param;
        const sums = [];

        // columns.forEach((column, index) => {
        //   if (index === 0) {

        //     return;
        //   }
        // })
        // sums[index] = '总价';
        sums[0] = '总价';
        sums[1]=0
        data.forEach((item, index) => {
          item.actualMoney=item.actualMoney.replace(/,/g,'');

          sums[1] += Number(item.actualMoney)
        })
        sums[1] += '元'
        return sums

      },
      add() {
        let item = {
          actualMoney: "",
          receiveAccountId: "",
        }
        this.tableData.push(item)
      }
    },
    mounted() {
      this.getSelectData();
    },
  };
</script>
<style lang="scss" scoped>
  @import "@/assets/scss/config.scss";

  .container {
    width: 100%;

    // border: 1px red solid;
    .addButton {
      text-align: center;
      // width: 180px;
      // margin: 0 auto;
      line-height: 32px;
      color: #ffffff;
      border: 1px $--color-primary-liyu solid;
      background-color: $--color-primary-liyu;
      cursor: pointer;
    }

    .table-container {
      width: 100%;
      margin-bottom: 20px;

      ::v-deep .el-input__inner {
        width: 200px !important;
      }

      ::v-deep .el-select {
        display: none;
        display: block;
        width: 200px !important;
      }
    }
  }
</style>
